/*
 * @Author: xianfuyou
 * @Date: 2022-04-01 11:10:28
 * @LastEditors: your name
 * @LastEditTime: 2022-04-11 13:17:38
 * @Description: file content
 */
import React, { memo, useEffect, useState } from 'react'
import { Modal, Form, Radio, DatePicker, Input, Row, Col } from 'antd'
import { QuestionCircleFilled } from '@ant-design/icons'
import './css/Model.css'
import moment from 'moment'
import Axios from '../../utils/myAxios'
import Qs from 'qs'
import store from '../../redux/store'
import { getOrderListsAction } from '../../redux/action/orderAction/orderAction'

const { TextArea } = Input

function OrderProductModel(props) {
  // console.log(props)
  // const baseUrl = 'http://139.155.237.161:8080'
  const { isShow, pHandleOk, pHandleCancel, nowStatus, requestJson } = props
  const { deliveryStatus, deliveryDate, deliverRemarks, id } = nowStatus
  const [checkputawayStatus, setCheckputawayStatus] = useState(null)
  const [checkdownOrder, setCheckdownOrder] = useState(null)
  const [modifyremark, setModifyremark] = useState(null)
  const [form] = Form.useForm()

  useEffect(() => {
    // 持续监听页面状态的变化,设置表单的值
    if (deliveryStatus === 1) {
      form.setFieldsValue({
        'putawaystate': deliveryStatus,
        'putawayStart': deliveryDate && moment(deliveryDate),
        "remark": deliverRemarks
      })
    } else {
      form.setFieldsValue({
        'putawaystate': deliveryStatus,
        "remark": deliverRemarks
      })
    }
    // 页面接收保存状态
    setCheckputawayStatus(deliveryStatus)
    setModifyremark(deliverRemarks)
    setCheckdownOrder(deliveryDate && moment(deliveryDate))
  }, [form, deliveryStatus, deliverRemarks, deliveryDate])

  const handleOk = () => {
    // 根据当前状态传递不同的数据
    if (checkputawayStatus === 1) {
      modifyProductStatus({
        id: id,
        deliveryStatus: checkputawayStatus,
        deliveryDate: checkdownOrder,
        deliverRemarks: modifyremark
      })
    } else {
      modifyProductStatus({
        id: id,
        deliveryStatus: checkputawayStatus,
        deliverRemarks: modifyremark
      })
    }
  };

  const handleCancel = () => {
    pHandleCancel(false);
  };

  // 修改发货状态的方法
  const modifyProductStatus = (json) => {
    console.log(json)
    Axios.post('/order/updateDeliveryStatusById', Qs.stringify(json),
      { headers: { "Content-Type": "application/x-www-form-urlencoded" } }).then(res => {
        console.log(res)
        store.dispatch(getOrderListsAction(requestJson))
      }).catch(err => {
        console.log(err)
      })
    pHandleOk(false);
  }

  // 选择radio框的回调
  const OrderStatusOnChange = e => {
    setCheckputawayStatus(e.target.value);
  };

  // 日期的回调
  const dateOnChange = (e) => {
    // console.log(e)
    setCheckdownOrder(e.format('YYYY-MM-DD'));
  };

  // 文本域的回调
  const remarkOnChange = e => {
    setModifyremark(e.target.value);
    // console.log(e.target.value)
  };

  return (
    <>
      <Modal
        className='xfy_dep_add_modal'
        title="订单发货"
        okText="保存"
        cancelText="取消"
        visible={isShow}
        onOk={handleOk}
        onCancel={handleCancel}
        destroyOnClose={true}
        forceRender={true}
      >
        {/* 在form表单上进行form.Item初始值的绑定 */}
        <Form form={form} preserve={false}>
          <Row>
            <Col span={24}>
              <Form.Item label="发货状态" wrapperCol={{ offset: 2 }} name="putawaystate">
                <Radio.Group onChange={OrderStatusOnChange}>
                  <Radio value={1}>已发货</Radio>
                  <Radio value={0}>未发货</Radio>
                </Radio.Group>
              </Form.Item>
            </Col>
            <Col span={24} style={checkputawayStatus === 1 ? { display: "" } : { display: 'none' }}>
              <Form.Item label="发货时间" wrapperCol={{ offset: 2 }} name="putawayStart">
                <DatePicker onChange={dateOnChange} size="small" />
              </Form.Item>
            </Col>
            <Col span={24}>
              <Form.Item label="发货备注" wrapperCol={{ offset: 2 }} name="remark">
                <TextArea onChange={remarkOnChange} rows={4} placeholder="maxLength is 6" />
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Modal>
    </>
  )
}

export default memo(OrderProductModel)